<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜单树</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${global_templets_skin}/systemstyle/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${global_templets_skin}/systemstyle/style/admin.css" media="all">
    <link href="${global_templets_skin}/systemstyle/layui/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
    <script type="text/javascript" src="${global_templets_skin}/common/js/jquery.min.js"></script>
    <script type="text/javascript" src="${global_templets_skin}/systemstyle/layui/ztree/jquery.ztree.all.min.js"></script>
    <script type="text/javascript" src="${global_templets_skin}/systemstyle/layui/ztree/jquery.ztree.exhide.min.js"></script>
</head>
<body  style="background: #fff;">

<div class="layui-card-body">
    <form class="layui-form" action="" lay-filter="component-form-element" onclick="return false;">
        <input id="treeId"   name="treeId"    type="hidden" value="${menu.menuId}"/>
        <input id="treeName" name="treeName"  type="hidden" value="${menu.menuName}"/>
        <div class="wrapper"><div class="treeShowHideButton" onclick="$.tree.toggleSearch();">
            <label id="btnShow" title="显示搜索" style="display:none;">︾</label>
            <label id="btnHide" title="隐藏搜索">︽</label>
        </div>
            <div class="treeSearchInput">
                <label for="keyword">关键字：</label><input type="text" class="empty" id="keyword" maxlength="50">
                <button class="btn" id="search-bt"> 搜索 </button>
            </div>
            <div class="treeExpandCollapse">
                <a id="expandAllBtn" href="#" onclick="return false;">展开</a> /
                <a id="collapseAllBtn" href="#" onclick="return false;">折叠</a>
            </div>
            <div id="tree" class="ztree treeselect"></div>
        </div>
    </form>
</div>
        <script src="${global_templets_skin}/systemstyle/layui/layui.js"></script>
        <script>
            layui.config({
                base: '${global_templets_skin}/systemstyle/' //静态资源所在路径
            }).extend({
                index: 'lib/index' //主入口模块
            }).use(['index', 'form'], function(){
                var $ = layui.$
                    ,admin = layui.admin
                    ,element = layui.element
                    ,form = layui.form;

                var setting={
                    async: {
                        enable: true,//要开启async功能必须设置为true,其他地方同理
                        dataType: "json",
                        type: "get",
                        url: "/admin/menu/user_menu_tree_data.do"
                    },
                    data: {
                        simpleData: {
                            enable: true,
                            idKey: "id",//节点id名
                            pIdKey: "pId",//父节点id名
                            rootPId: 0//默认根节点为0
                        }
                    },
                    callback:{
                        beforeCheck:true,
                        onClick: zTreeOnClick
                    }
                };
                var zTreeNodes=[];
                var zTreeObj = $.fn.zTree.init($("#tree"),setting, zTreeNodes);

                function zTreeOnClick(event, treeId, treeNode) {
                    //alert(treeNode.id + ", " + treeNode.name);
                    var treeId = treeNode.id;
                    var treeName = treeNode.name;
                    //layer.msg(treeId);
                    $("#treeId").val(treeId);
                    $("#treeName").val(treeName);
                }

                function expandNode(e) {
                    var zTree = $.fn.zTree.getZTreeObj("tree"),
                        type = e.data.type,
                        nodes = zTree.getSelectedNodes();
                    if (type == "expandAll") {
                        zTree.expandAll(true);
                    } else if (type == "collapseAll") {
                        zTree.expandAll(false);
                    }
                }

                $(document).ready(function(){
                    $("#expandAllBtn").bind("click", {type:"expandAll"}, expandNode);
                    $("#collapseAllBtn").bind("click", {type:"collapseAll"}, expandNode);
                });

                //过滤ztree显示数据
                function filter() {
                    var allNode = zTreeObj.transformToArray(zTreeObj.getNodes());
                    zTreeObj.hideNodes(allNode);

                    function filterFunc(node) {
                        var keywords = $("#keyword").val();
                        if (node.name.indexOf(keywords) != -1) return true;
                        return false;
                    };
                    var keywords = $("#keyword").val();
                    if (keywords == "") {
                        zTreeObj.showNodes(allNode);
                        // zTreeObj.expandAll(false);
                    } else {
                        nodeList = zTreeObj.getNodesByFilter(filterFunc);
                        for (var n in nodeList) {
                            if (nodeList.hasOwnProperty(n)) {
                                findParent(zTreeObj, nodeList[n]);
                            }
                        }
                        zTreeObj.showNodes(nodeList);
                    }
                }

                function findParent(treeObj, node) {
                    treeObj.expandNode(node, true, false, false);
                    var pNode = node.getParentNode();
                    if (pNode != null) {
                        nodeList.push(pNode);
                        findParent(treeObj, pNode);
                    }
                };
                $("#search-bt").click(filter);
            });
        </script>
</body>
</html>